<template>
	<div class="dashboard-container">
		<!-- <el-card style="height: 120px; margin-bottom: 20px">
      <el-form label-width="80px" :model="form" :inline="true">
        <el-form-item>
          <el-input v-model="form.name" placeholder="关键词搜索" clearable />
        </el-form-item>
        <el-form-item>
          <el-select v-model="form.copywritingtypeid" placeholder="文案分类" filterable>
            <el-option v-for="a in reqCategory1" :key="a.id" :label="a.name" :value="a.id"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="searchclick" style="margin-left: 12px">筛选</el-button>
        <el-button @click="resetSearch">重置</el-button>
        <el-button @click="addrenyuan" type="success">添加</el-button>
      </el-form>
    </el-card> -->
		<el-card style="height: 140px; margin-bottom: 20px">
			<el-form label-width="80px" :model="form" :inline="true">
				<el-form-item>
					<el-input v-model="form.name" placeholder="关键词搜索" clearable />
				</el-form-item>
				<!-- <el-form-item>
					<el-input v-model="form.id" placeholder="ID搜索" clearable />
				</el-form-item> -->
				<el-form-item>
					<el-input v-model="form.pid" placeholder="上级ID搜索" clearable />
				</el-form-item>
				<el-form-item>
					<el-select @change="getList" v-model="form.state" placeholder="身份" filterable>
						<el-option label="全部" :value="0"></el-option>
						<el-option label="老板" :value="1"></el-option>
						<el-option label="店员" :value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="">
					<el-date-picker @change="dateChange" value-format="timestamp" v-model="dateRange" type="daterange"
						placeholder="请选择" size="default" />
				</el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="searchclick"
					style="margin-left: 12px">筛选</el-button>
				<el-button @click="resetSearch">重置</el-button>
				<el-button @click="export_user" type="success">导出</el-button>
				<!-- <el-button @click="addrenyuan" type="success">添加</el-button> -->
			</el-form>
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="全部" name="0"></el-tab-pane>
				<el-tab-pane label="未绑定门店" name="1"></el-tab-pane>
				<el-tab-pane label="已绑定门店" name="2"></el-tab-pane>
			</el-tabs>
		</el-card>
		<el-table :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" :data="tableData"
			border max-height="680" style="width: 98%;height:680px; margin-left: 1%;">
			<el-table-column prop="id" label="id">
			</el-table-column>
			<el-table-column prop="shanghuid" label="门店id">
			</el-table-column>
			<el-table-column prop="login_time" label="注册时间">
			</el-table-column>
			<el-table-column prop="" label="手机类型">
				<template slot-scope="scope">
					<div v-if="scope.row.handy==1">
						安卓
					</div>
					<div v-else-if="scope.row.handy==2">
						苹果
					</div>
				</template>
			</el-table-column>
			<!--   <el-table-column label="头像" align="center" width="90">
        <template slot-scope="scope">
          <div class="">
            <el-image style="width: 70px; height: 70px" :src='scope.row.logo'></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="昵称">
      </el-table-column> -->
			<el-table-column prop="name" label="名称">
			</el-table-column>
			<el-table-column prop="pid" label="上级ID">
			</el-table-column>
			<el-table-column prop="phone" label="联系电话">
			</el-table-column>
			<el-table-column prop="" label="商城">
				<template slot-scope="scope">
					<div v-if="scope.row.sc==1">
						未开通
					</div>
					<div v-else-if="scope.row.sc==2">
						已开通
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="" label="会员管理">
				<template slot-scope="scope">
					<div v-if="scope.row.hy==1">
						未开通
					</div>
					<div v-else-if="scope.row.hy==2">
						已开通
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="" label="基础文案">
				<template slot-scope="scope">
					<div v-if="scope.row.wa==1">
						未开通
					</div>
					<div v-else-if="scope.row.wa==2">
						已开通
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="" label="收款">
				<template slot-scope="scope">
					<div v-if="scope.row.sk==1">
						未开通
					</div>
					<div v-else-if="scope.row.sk==2">
						已开通
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="" label="优惠券">
				<template slot-scope="scope">
					<div v-if="scope.row.yhj==1">
						未开通
					</div>
					<div v-else-if="scope.row.yhj==2">
						已开通
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="" label="充值购">
				<template slot-scope="scope">
					<div v-if="scope.row.czg==1">
						未开通
					</div>
					<div v-else-if="scope.row.czg==2">
						已开通
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="" label="单品快买">
				<template slot-scope="scope">
					<div v-if="scope.row.dpkm==1">
						未开通
					</div>
					<div v-else-if="scope.row.dpkm==2">
						已开通
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="dpkmnum" label="单品快买开通数量">
			</el-table-column>
			<el-table-column prop="czgnum" label="充值购数量">
			</el-table-column>
			<el-table-column prop="yhjnum" label="优惠券数量">
			</el-table-column>
			<el-table-column width="120" prop="wainttime" label="文案开始时间">
			</el-table-column>
			<el-table-column width="120" prop="waendtime" label="文案结束时间">
			</el-table-column>
			<el-table-column width="120" prop="skinttime" label="收款开始时间">
			</el-table-column>
			<el-table-column width="120" prop="yhjinttime" label="优惠券开始时间">
			</el-table-column>
			<el-table-column width="120" prop="yhjendtime" label="优惠券结束时间">
			</el-table-column>
			<el-table-column width="120" prop="czginttime" label="充值购开始时间">
			</el-table-column>
			<el-table-column width="120" prop="dpkminttime" label="单品快买开始时间">
			</el-table-column>
			<el-table-column width="120" prop="czgendtime" label="充值购结束时间">
			</el-table-column>
			<el-table-column width="120" prop="dpkmendtime" label="单品快买结束时间">
			</el-table-column>
			<el-table-column width="120" prop="scinttime" label="商城开始时间">
			</el-table-column>
			<el-table-column width="120" prop="scendtime" label="商城到期时间">
			</el-table-column>
			<el-table-column width="120" prop="hyinttime" label="会员开通时间">
			</el-table-column>
			<el-table-column width="120" prop="hyendtime" label="会员结束时间">
			</el-table-column>
			<el-table-column width="120" prop="skendtime" label="收款结束时间">
			</el-table-column>
			<el-table-column prop="gd" label="股东">
			</el-table-column>
			<el-table-column width="120" prop="gdinttime" label="股东开始时间">
			</el-table-column>
			<el-table-column width="120" prop="gdendtime" label="股东结束时间">
			</el-table-column>
			<!--  <el-table-column prop="" label="门店绑定">
        <template slot-scope="scope">
          <div v-if="scope.row.status==1">
            <el-tag>未绑定门店</el-tag>
          </div>
          <div v-else-if="scope.row.status==2">
            <el-tag type="success">已绑定门店</el-tag>
          </div>
        </template>
      </el-table-column> -->
			<el-table-column prop="" label="身份">
				<template slot-scope="scope">
					<div v-if="scope.row.state==1">
						<el-tag>老板</el-tag>
					</div>
					<div v-else-if="scope.row.state==2">
						<el-tag type="success">店员</el-tag>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="" label="操作" fixed="right" width="250">
				<template slot-scope="scope">
					<el-button @click="rechargeVip(scope.row)" size="mini" type="primary">充值vip</el-button>
					<el-button @click="changeTime(scope.row)" size="mini" type="warning">修改时间</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog title="修改套餐时间" :visible.sync="changeTimeDialog">
			<el-form :label-width="formLabelWidth">
				<el-form-item label="时间类型">
					<el-select v-model="timeType" placeholder="请选择">
						<el-option v-for="item in timeOptions" :key="item.value" :label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="结束时间">
					<el-date-picker format="yyyy 年 MM 月 dd 日" value-format="timestamp" :clearable='false'
						v-model="endTime" type="date" placeholder="选择日期">
					</el-date-picker>
				</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="changeTimeDialog = false">取 消</el-button>
				<el-button type="primary" @click="subTimeForm()">确 定</el-button>
			</div>
		</el-dialog>


		<Pagination2 :currentPage="this.form.pageNo" :size="this.form.pageSize" :total="total"
			@changelimit="changelimit" @changecurrentPage="changecurrentPage"></Pagination2>
		<!-- <add ref="add" @refresh="refresh"></add> -->
		<rechargeBox @refresh='getList' ref="recharge"></rechargeBox>
	</div>
</template>

<script>
	import rechargeBox from './recharge.vue'
	import {
		storeStaff,
		shanghuTimeChange
	} from "@/api/store";
	export default {
		name: "Dashboard",
		components: {
			rechargeBox
		},
		data() {
			return {
				activeName: '0',
				total: 0,
				tableData: [],
				form: {
					status: 0, //0全部 1未绑定门店 2已绑定门店
					name: "",
					pageNo: 1,
					pageSize: 15,
					state: 0, //1老板 2店员 0全部
					pid: '',
					inttime: '',
					endtime: '',
					id:''
				},
				changeTimeForm: {},
				dateRange: [],
				changeTimeDialog: false,
				formLabelWidth: '200',
				timeOptions: [{
					value: 'waendtime',
					label: '文案结束时间'
				}, {
					value: 'yhjendtime',
					label: '优惠劵结束时间'
				}, {
					value: 'czgendtime',
					label: '充值购结束时间'
				}, {
					value: 'dpkmendtime',
					label: '单品快卖结束时间'
				}, {
					value: 'scendtime',
					label: '商城到期时间'
				}, {
					value: 'hyendtime',
					label: '会员结束时间'
				}, {
					value: 'skendtime',
					label: '收款结束时间'
				}, {
					value: 'gdendtime',
					label: '股东结束时间'
				}],
				timeType: '',
				endTime: ''
			};
		},

		methods: {
			dateChange(e) {
				this.form.inttime = e[0] / 1000
				this.form.endtime = e[1] / 1000
			},
			rechargeVip(val) {
				this.$refs.recharge.initData(val)
			},
			resetSearch() {
				this.form.name = "";
				this.form.state = 0;
				this.form.pid = ''
				this.getList();
			},
			searchclick() {
				this.getList()
			},
			async passIden(val) {
				this.$confirm('是否通过认证', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					storeAuth({
						id: val.id
					}).then(resp => {
						if (resp.code == 0) {
							this.$message({
								type: 'success',
								message: '已认证'
							})
							this.getList()
						} else {
							this.$message({
								type: 'error',
								message: resp.msg
							});
						}
					})
				})
			},
			handleClick(tab, event) {
				this.activeName = tab.index
				this.form.status = parseInt(tab.index)
				this.getList()
			},
			async getList() {
				this.form.pid = this.form.pid == '' ? '' : parseInt(this.form.pid)
				let result = await storeStaff(this.form);
				if (result.code == 0) {
					if (result.data.data != []) {
						this.tableData = result.data.data;
						this.total = result.data.totalCount;

						this.tableData.forEach((item, index) => {
							item.login_time = this.getDate(item.login_time)
							item.wainttime = this.getDate(item.wainttime)
							item.waendtime = this.getDate(item.waendtime)
							item.skinttime = this.getDate(item.skinttime)
							item.yhjinttime = this.getDate(item.yhjinttime)
							item.yhjendtime = this.getDate(item.yhjendtime)
							item.czginttime = this.getDate(item.czginttime)
							item.dpkminttime = this.getDate(item.dpkminttime)
							item.czgendtime = this.getDate(item.czgendtime)
							item.dpkmendtime = this.getDate(item.dpkmendtime)
							item.scinttime = this.getDate(item.scinttime)
							item.scendtime = this.getDate(item.scendtime)
							item.hyinttime = this.getDate(item.hyinttime)
							item.skendtime = this.getDate(item.skendtime)
							item.hyendtime = this.getDate(item.hyendtime)
							item.gdinttime = this.getDate(item.gdinttime)
							item.gdendtime = this.getDate(item.gdendtime)
							// if (item.iamges != "") {
							//   this.$set(item, "images", item.images.split(","));
							// }
						});
					}
				}
			},
			getDate(stamp) {
				if (stamp == 0) {
					return ''
				}
				let date = new Date(stamp * 1000)
				let y = date.getFullYear()
				let m = (date.getMonth()) + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
				let d = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
				return y + '-' + m + '-' + d
			},
			changelimit(val) {
				this.form.pageSize = val;
				this.getList();
			},
			changecurrentPage(val) {
				this.form.pageNo = val;
				this.getList();
			},
			async export_user() {
				if (this.form.inttime == '' || this.form.endtime == '') {
					this.$message({
						message: '请选择起始时间',
						type: 'warning',
					})
					return
				}
				let param = {
					inttime: Math.floor(new Date(this.form.inttime).getTime()),
					endtime: Math.floor(new Date(this.form.endtime).getTime()),
				};
				// this.$router.push({ path: "https://api.suishilian.com/admin/exceldc", query: param });
				const externalLinkWithParams =
					`https://dscc.suishilian.com/admin/excelyuangong?inttime=${param.inttime}&endtime=${param.endtime}`;

				window.location.href = externalLinkWithParams;
			},

			// 修改套餐时间按钮点击
			changeTime(val) {
				let id = val.id;
				this.changeTimeForm.id  = val.id;
				this.changeTimeDialog = true;
			},
			// 修改套餐时间提交方法
			async subTimeForm() {
				if (this.timeType == '') {
					this.$message({
						message: '请选择要修改的时间类型',
						type: 'warning'
					})
					return
				} else if (this.endTime == '') {
					this.$message({
						message: '请选择结束时间',
						type: 'warning'
					})
					return
				}
				this.changeTimeForm[this.timeType] = parseInt(this.endTime/1000);
				let res = await shanghuTimeChange(this.changeTimeForm);
				if(res.code==0) {
					this.$message({
						type:'success',
						message:'修改成功'
					})
					this.changeTimeDialog  = false;
					this.changeTimeForm = {};
					this.endTime = '';
					this.timeType = '';
					this.getList();
				} else {
					this.$message({
						type:'warning',
						message:res.msg
					})
				}
			}
		},
		watch: {

		},
		mounted() {
			this.getList()
		},
	};
</script>

<style lang="scss" scoped>
	// .dashboard {
	//   &-container {
	//     margin: 30px;
	//   }
	//   &-text {
	//     font-size: 30px;
	//     line-height: 46px;
	//   }
	// }
</style>